// 文档加载事件
$(function() {

    // 首页banner
    $(".listbox").tyslide({
        boxh: 300, //盒子的高度
        w: 455, //盒子的宽度
        h: 300, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 40, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 40, //控制按钮宽度
        controlsH: 10, //控制按钮高度
        radius: 5, //控制按钮圆角度数
        controlsColor: "#d7d7d7", //普通控制按钮的颜色
        controlsCurrentColor: "#fff", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
    });


    // 电子书
    // $("#ebook .listbox").tyslide({
    //     boxh:219,//盒子的高度
    //     w:332,//盒子的宽度
    //     h:219,//图片的高度
    //     isShow:true,//是否显示控制器
    //     isShowBtn:true,//是否显示左右按钮
    //     controltop:10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
    //     controlsW:20,//控制按钮宽度
    //     controlsH:4,//控制按钮高度
    //     radius:0,//控制按钮圆角度数
    //     controlsColor:"#d7d7d7",//普通控制按钮的颜色
    //     controlsCurrentColor:"#95d46c",//当前控制按钮的颜色
    //     isShowNum:false //是否显示数字
    // });

    //功能三: tab切换效果  选项卡效果
    //使用原生js来实现
    /* 
        思路:
            1.获取相关元素对象  
                .title li
                .content ul
            2.注册li事件 (点击 或 移入移出)
            3.实现逻辑功能

    */

    /* //1.获取元素对象
        let lis=document.querySelectorAll('#ebook .title ul li');
        let uls=document.querySelectorAll('#ebook .content>ul');

    //2.给li注册事件  移入
        for (let i = 0; i < lis.length; i++) {
            // console.log(lis[i]);
            //批量注册事件
            lis[i].onmouseover=function() {
                // console.log(1);
                //先清除所有li标签上的类名
                for (let j = 0; j < lis.length; j++) {
                    lis[j].className='';

                    uls[j].classList.remove('on');
                    
                }
                //把当前li设置类名为active
                this.className='active';

                //??? li如何与ul内容对应---索引

                //uls[i].className='on';//不能使用,直接覆盖类名
                // console.log(uls[i].classList);
                uls[i].classList.add('on');
            }
            
        } */


    //jquery的方法
    // $('#ebook .title ul li').hover(function(){
    //     //给当前li添加类名active ,兄弟li去类名
    //     $(this).addClass('active').siblings().removeClass('active');

    //     //获取当前li的索引
    //     // index() 不传递参数，返回这个元素在同辈中的索引位置
    //     let index=$(this).index();

    //     //设置当前ul对应的类名 on 其它ul去掉类名 on
    //     $('#ebook .content>ul').eq(index).addClass('on').siblings().removeClass('on');
    // })    
})